import { System } from "../global.slint";
import { ListView, VerticalBox } from "std-widgets.slint";

export component MenuPage inherits Rectangle{
    width: System.screen_width;
    height: System.screen_height;
    background: black;




//    list:=ListView {
//        accessible-item-selected: true;
//        accessible-item-index: 0;
//        for item[i] in [{text:"hello1",age:12},{text:"hello1",age:12},{text:"hello1",age:12},{text:"hello1",age:12},{text:"hello1",age:12},{text:"hello1",age:12},{text:"hello1",age:12},{text:"hello1",age:12},{text:"hello1",age:12},{text:"hello1",age:12},]:Rectangle{
//            Text {
//
//                text: @tr("{}{}",item.text,i);
//                color: i == i*i ?white:green;
//                font-size: 30px;
//            }
//        }
//    }

    // item的数量
    property <int> count : 15;

    // 菜单列表项的子item的高度，决定了页面可以显示的item数量
    in property <int> list_item_count : 4;
    in property <length> item_height:System.screen_height / list_item_count;
    // 列表的最大高度
    in property <length> list_max_height : item_height * count;

    // 当前选择的item索引
    property <int> current_index:0;

    property <length> list_pos_y:0px;
    list:= VerticalLayout {
        y: list_pos_y;
        for i in count:Rectangle{
            height: item_height;
            background: yellow;
            Text {
                text: @tr("list {}",i);
            }
        }

        animate y {
             duration: 100ms;
             easing: ease-in-out;
        }
    }

    // 选择框
    property <length> border_y:0px;
    Rectangle {
        y: border_y;
        height: item_height;
        border-width: 4px;
        border-color: blue;
        animate y {
             easing: ease-in-out;
             duration: 100ms;
        }
    }

    //当前选择的item index
    Text {
        x:0px;
        color: black;
        text: current_index;
    }

    Rectangle {
        VerticalLayout {
            Rectangle {
                vertical-stretch: 1;
//                background: blue;
                TouchArea {
                    height: parent.height;
                    width: parent.width;
                    clicked => {
                        if(border_y == 0){
                            if(list_pos_y == 0){

                            }else{
                                list_pos_y += item_height;
                            }
                        }else{
                            border_y -= item_height;
                        }

                        // 修改当前选择的索引
                        if(current_index > 0){
                            current_index -= 1;
                        }


                    }
                }
            }
            Rectangle {
                vertical-stretch: 1;
//                background: yellow;
                TouchArea {
                    height: parent.height;
                    width: parent.width;
                    clicked => {
                        //
                        if(border_y >= item_height * (list_item_count - 1)){
                            if(-list_pos_y >= item_height * (count - list_item_count)){

                            }else{
                                list_pos_y -= item_height;
                            }
                        }else{
                            border_y += item_height;
                        }

                        // 修改当前选择的索引
                        if(current_index < count - 1){
                            current_index += 1;
                        }

                    }
                }
            }
        }
    }



//    property <length> border_height:50px;
//    property <length> border_pos_y:0px;
//    Rectangle {
//        y: border_pos_y;
//        width: 100%;
//        height: border_height;
//        border-color: white;
//        border-width: 4px;
//    }


}